import React from 'react'
import { useNavigate } from 'react-router-dom'
export default function () {
    const navigate = useNavigate()
    const handleClick = () => {
        //这种路由跳转方式默认是push，如果要实现replace的效果，可以加上第二个参数{replace:true}
        // navigate('/system',{replace:true})
        //传递state参数给system组件
        // navigate('/system',{state:'123321'})
        //传递params参数给system组件
        //注意：传递过去的参数要在路由那边接收
        // const name='张三'
        // navigate(`/system/${name}`)
        //传递search参数给system组件
        const obj = {name:'zhangsan',age:'18'}
        navigate(`/system?name=${obj.name}&age=${obj.age}`)
        /*
        综合比较三种方法，
        1.只有params参数在路由组件那儿需要接收
        2.获取传递的数据，注意search参数的获取方式比较特殊    1)[state,setState]    2) state.get('name)
        */
    }
    return (
        <div>
            <p>
                <label>用户名：</label>
                <input type="text" name="" id="" />
            </p>
            <p>
                <label>密码：</label>
                <input type="password" name="" id="" />
            </p>
            <button onClick={handleClick}>提交</button>
        </div>
    )
}
